<template>
  <div class="questions-list">
    <el-card 
      v-for="(question, index) in questions" 
      :key="question.id"
      class="question-card"
      shadow="hover"
    >
      <!-- 添加编辑图标 -->
      <div class="edit-icon">
        <el-tooltip
          content="编辑题目"
          placement="top"
          :hide-after="0"
        >
          <el-icon @click="handleEdit(question)" class="edit-btn">
            <Edit />
          </el-icon>
        </el-tooltip>
        <el-tooltip
          content="删除题目"
          placement="top"
          :hide-after="0"
        >
          <el-icon @click="handleDelete(question)" class="delete-btn">
            <Delete />
          </el-icon>
        </el-tooltip>
      </div>

      <!-- 题目头部 -->
      <div class="question-header">
        <span class="question-index">第 {{ index + 1 }} 题</span>
        <el-tag 
          :type="getQuestionTypeTag(question.questionType)" 
          effect="light" 
          class="question-type-tag"
        >
          {{ getQuestionTypeLabel(question.questionType) }}
        </el-tag>
        <el-tag 
          :type="getDifficultyTag(question.difficulty)" 
          effect="light" 
          size="small" 
          class="difficulty-tag"
        >
          {{ getDifficultyLabel(question.difficulty) }}
        </el-tag>
      </div>

      <!-- 题目内容 -->
      <div class="question-content">
        <!-- 综合题文章内容 -->
        <div v-if="question.questionType === 'READING'" class="reading-passage">
          <div class="passage-content">{{ question.passage }}</div>
          <!-- 综合题子题目 -->
          <div v-if="question.subQuestions" class="sub-questions">
            <div v-for="(subQ, index) in question.subQuestions" :key="subQ.id" class="sub-question">
              <div class="sub-question-header">
                <span class="sub-question-index">第{{ index + 1 }}小题</span>
                <span class="sub-question-score">({{ subQ.score }}分)</span>
              </div>
              <div class="sub-question-stem">{{ subQ.stem }}</div>
              <!-- 子题目选项 -->
              <div v-if="subQ.options && subQ.options.length > 0" class="sub-question-options">
                <div v-for="option in subQ.options" :key="option.optionId" class="option-item">
                  <span class="option-id">{{ option.optionId }}.</span>
                  <span class="option-content">{{ option.content }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 非综合题题目的题干 -->
        <div v-else class="question-stem">{{ question.stem }}</div>

        <!-- 选项区域 - 单选和多选 -->
        <div v-if="['SINGLE_CHOICE', 'MULTIPLE_CHOICE'].includes(question.questionType)" class="options-list">
          <div v-for="option in question.options" :key="option.optionId" class="option-item">
            <span class="option-id">{{ option.optionId }}.</span>
            <span class="option-content">{{ option.content }}</span>
          </div>
        </div>

        <!-- 判断题 -->
        <div v-if="question.questionType === 'TRUE_FALSE'" class="true-false-options">
          <el-radio-group v-model="question.userAnswer" disabled>
            <el-radio label="TRUE">正确</el-radio>
            <el-radio label="FALSE">错误</el-radio>
          </el-radio-group>
        </div>

        <!-- 填空题 -->
        <div v-if="question.questionType === 'FILL_BLANK'" class="fill-blank-content">
          <div class="fill-blank-answers">
            <div v-for="(blank, index) in question.blanks?.split('|')" :key="index" class="blank-item">
              <span class="blank-index">第{{ index + 1 }}空：</span>
              <span class="blank-answer">{{ blank }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 答案和解析区域 -->
      <el-collapse class="answer-section">
        <el-collapse-item>
          <template #title>
            <span class="answer-title">答案与解析</span>
          </template>
          <div class="answer-content">
            <!-- 答案展示 -->
            <div class="answer-area">
              <strong>答案：</strong>
              <template v-if="question.questionType === 'SINGLE_CHOICE'">
                {{ question.answer }}
              </template>
              <template v-else-if="question.questionType === 'MULTIPLE_CHOICE'">
                {{ question.answers?.[0] }}
              </template>
              <template v-else-if="question.questionType === 'TRUE_FALSE'">
                {{ question.answer === 'TRUE' ? '正确' : '错误' }}
              </template>
              <template v-else-if="question.questionType === 'FILL_BLANK'">
                <div v-for="(blank, index) in question.blanks?.split('|')" :key="index" class="blank-answer-item">
                  <span>第{{ index + 1 }}空：{{ blank }}</span>
                </div>
              </template>
              <template v-else-if="question.questionType === 'READING'">
                <div v-for="(subQ, index) in question.subQuestions" :key="subQ.id" class="sub-question-answer">
                  <div class="sub-question-title">第{{ index + 1 }}小题：</div>
                  <div class="sub-question-content">{{ subQ.answer }}</div>
                </div>
              </template>
              <template v-else>
                <div class="formatted-answer">{{ question.answers?.[0] || question.answer }}</div>
              </template>
            </div>

            <!-- 解析展示 -->
            <div class="analysis-area" v-if="question.analysis || (question.questionType === 'READING' && question.subQuestions)">
              <strong>解析：</strong>
              <template v-if="question.questionType === 'READING'">
                <div v-for="(subQ, index) in question.subQuestions" :key="subQ.id" class="sub-question-analysis">
                  <div class="sub-question-title">第{{ index + 1 }}小题：</div>
                  <div class="sub-question-content">{{ subQ.analysis }}</div>
                </div>
              </template>
              <template v-else>
                <div class="analysis-content">{{ question.analysis }}</div>
              </template>
            </div>

            <!-- 知识点标签 -->
            <div class="knowledge-points" v-if="question.knowledgePoints?.length">
              <strong>知识点：</strong>
              <el-tag
                v-for="point in question.knowledgePoints"
                :key="point"
                class="knowledge-tag"
                effect="plain"
                size="small"
              >
                {{ point }}
              </el-tag>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </el-card>
  </div>
</template>

<script setup>
import { Edit, Delete } from '@element-plus/icons-vue'

const props = defineProps({
  questions: {
    type: Array,
    required: true
  }
})

const emit = defineEmits(['edit', 'delete'])

// 获取题目类型标签样式
const getQuestionTypeTag = (type) => {
  const typeMap = {
    'SINGLE_CHOICE': 'primary',
    'MULTIPLE_CHOICE': 'success',
    'TRUE_FALSE': 'info',
    'FILL_BLANK': 'warning',
    'SHORT_ANSWER': 'danger',
    'READING': 'danger' 
  }
  return typeMap[type] || 'info'
}

// 获取题目类型标签文本
const getQuestionTypeLabel = (type) => {
  const typeMap = {
    'SINGLE_CHOICE': '单选题',
    'MULTIPLE_CHOICE': '多选题',
    'TRUE_FALSE': '判断题',
    'FILL_BLANK': '填空题',
    'SHORT_ANSWER': '简答题',
    'READING': '综合题'
  }
  return typeMap[type] || type
}

// 获取难度标签
const getDifficultyTag = (difficulty) => {
  const difficultyMap = {
    1: 'success',
    2: 'warning',
    3: 'danger'
  }
  return difficultyMap[difficulty] || 'info'
}

// 获取难度标签文本
const getDifficultyLabel = (difficulty) => {
  const difficultyMap = {
    1: '简单',
    2: '中等',
    3: '困难'
  }
  return difficultyMap[difficulty] || '未知'
}

// 处理编辑按钮点击
const handleEdit = (question) => {
  emit('edit', question)
}

// 处理删除按钮点击
const handleDelete = (question) => {
  emit('delete', question)
}
</script>

<style scoped>
.questions-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.question-card {
  border-radius: 8px;
  transition: all 0.3s ease;
}

.question-card:hover {
  transform: translateY(-2px);
}

.question-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  gap: 12px;
}

.question-index {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.question-type-tag {
  margin-right: 8px;
}

.difficulty-tag {
  font-size: 12px;
}

.question-content {
  margin-bottom: 20px;
}

.question-stem {
  font-size: 15px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 16px;
}

.options-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.option-item {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 4px;
  background-color: #f5f7fa;
  transition: background-color 0.3s ease;
}

.option-item:hover {
  background-color: #e6e8eb;
}

.option-id {
  font-weight: bold;
  color: #409EFF;
}

.true-false-options {
  margin-top: 12px;
}

.fill-blank-content {
  margin: 16px 0;
}

.fill-blank-answers {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.blank-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.blank-index {
  font-weight: bold;
  color: #409EFF;
  margin-right: 8px;
}

.blank-answer {
  color: #67c23a;
}

.answer-section {
  margin-top: 16px;
  border-top: 1px solid #ebeef5;
}

.answer-title {
  color: #409EFF;
  font-weight: bold;
}

.answer-content {
  padding: 16px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.answer-area {
  margin-bottom: 16px;
}

.analysis-area {
  margin-bottom: 16px;
  line-height: 1.6;
}

.knowledge-points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.knowledge-tag {
  margin-right: 8px;
}

.formatted-answer {
  white-space: pre-wrap;
  line-height: 1.6;
}

/* 编辑图标样式 */
.edit-icon {
  position: absolute;
  top: 16px;
  right: 32px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.question-card:hover .edit-icon {
  opacity: 1;
}

.edit-btn {
  font-size: 30px;
  color: #409EFF;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.edit-btn:hover {
  color: #66b1ff;
  background-color: #ecf5ff;
}

/* 删除按钮样式 */
.delete-btn {
  font-size: 30px;
  color: #f56c6c;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.delete-btn:hover {
  color: #f56c6c;
  background-color: #ecf5ff;
}

/* 综合题题样式 */
.reading-passage {
  margin-bottom: 24px;
}

.passage-content {
  font-size: 15px;
  line-height: 1.8;
  padding: 16px;
  background-color: #f5f7fa;
  border-radius: 4px;
  margin-bottom: 20px;
  white-space: pre-wrap;
}

.sub-questions {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sub-question {
  padding: 16px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.sub-question-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  gap: 8px;
}

.sub-question-index {
  font-weight: bold;
  color: #409EFF;
}

.sub-question-score {
  color: #f56c6c;
}

.sub-question-stem {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 12px;
}

.sub-question-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sub-question-answer {
  margin-bottom: 12px;
}

.sub-question-analysis {
  margin-bottom: 12px;
}

.sub-question-title {
  font-weight: bold;
  color: #409EFF;
  margin-bottom: 4px;
}

.sub-question-content {
  padding-left: 16px;
}

.blank-answer-item {
  margin-bottom: 8px;
  color: #67c23a;
}

/* 响应式样式 */
@media screen and (max-width: 768px) {
  .passage-content {
    padding: 12px;
  }

  .sub-question {
    padding: 12px;
  }
}
</style> 